<template>
  <el-row>
    <el-form :model="wx" :rules="wx_rules" ref="wx" :disabled="chennel_status !== 100 ? false : true" size="small" label-width="110px">
      <el-form-item label="通道状态：">
        <span class="fz12" :class="chennel_status === -200 ? 'err' : chennel_status === 200 ? 'succ' : 'tip'">{{ chennel_status === -200 ? '审核未通过' : chennel_status === 0 ? '未提交' : chennel_status ===  100 ? '待审核' : chennel_status === 200 ? '审核通过': '无' }}</span>
      </el-form-item>
      <el-form-item label="错误信息：" v-if="chennel_status === -200">
        <span class="fz12 err">{{ error_info }}</span>
      </el-form-item>
      <el-form-item label="微信APPID：">
        <el-input class="w240" v-model="wx.app_id"></el-input>
        <div class="fz12">请前往“<span class="succ">微信公众平台</span>”上点击“<span class="succ">开发者中心</span>”，复制APPID;例如：wx0fe968s123451234，微信固定二维码收款必须填写。</div>
      </el-form-item>
      <el-form-item label="微信商户号：" prop="wx_commer_id">
        <el-input class="w240" v-model="wx.wx_commer_id"></el-input>
        <div class="fz12">微信支付开通成功的通知邮件里，复制“<span class="succ">微信商户号</span>”;例如：10012345</div>
      </el-form-item>
      <el-form-item label="商家结算周期：" required>
        <el-button type="warning" size="small">D+1</el-button>
      </el-form-item>
      <el-form-item label="">
        <el-radio-group v-model="wx.channel_type" @change="handleZeroRate">
          <el-radio :label="0">普通</el-radio>
          <el-radio :label="1">绿洲计划</el-radio>
          <el-radio :label="2">公益类</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="当前执行费率：" prop="rate">
        <el-input :disabled="wx.channel_type === 2 ? true : false" class="w240" v-model.number="wx.rate" maxlength="5"></el-input>%
      </el-form-item>
      <el-form-item label="到期时间：" v-if="wx.channel_type !== 2">
        <el-date-picker class="w240" type="date" v-model="wx.expire_time" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="到期执行费率：" prop="expire_rate" v-if="wx.expire_time">
        <el-input class="w240" v-model.number="wx.expire_rate" maxlength="5"></el-input>%
      </el-form-item>
      <el-form-item label-width="85px" v-if="chennel_status !== 100">
        <el-button type="primary" size="small" @click="handleClickWxSubmit" :loading="btnSubmit">确认保存</el-button> 
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
import { merchantChannelWxQuery, merchantChannelWxUpdate } from '@/api/shop'

export default {
  data() {
    return {
      btnSubmit: false,
      error_info: '',
      chennel_status: '',
      wx: {
        app_id: '',
        wx_commer_id: '',
        balance_type: 'd1',
        rate: '',
        expire_time: '',
        expire_rate: '',
        channel_type: 0
      },
      wx_rules: {
        app_id: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        wx_commer_id: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        rate: [{ required: true, trigger: 'blur', type: 'number', message: '费率格式不对哦~' }],
        expire_rate: [{ required: true, trigger: 'blur', type: 'number', message: '费率格式不对哦~' }]
      }
    }
  },
  methods: {
    handleClickWxSubmit() {
      this.$refs['wx'].validate(valid => {
        if (valid) {
          this.btnSubmit = true
          merchantChannelWxUpdate(this.$route.query.merchant_num, this.wx).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success('申请成功，请耐心等待审核~')
              this.chennel_status = 100
              this.btnSubmit = false
            } else {
              this.$message.error(res.data.errorMsg)
              this.btnSubmit = false
            }
          })
        }
      })
    },
    handleZeroRate(v) {
      this.wx.expire_time = ''
      this.wx.expire_rate = ''
      v === 2 ? this.wx.rate = 0 : this.wx.rate = ''
    }
  },
  created() {
    merchantChannelWxQuery(this.$route.query.merchant_num).then(res => {
      if (res.data.errorCode === 0) {
        this.wx.wx_commer_id = res.data.result.wx_commer_id
        this.wx.app_id = res.data.result.app_id
        this.wx.balance_type = res.data.result.balance_type
        this.wx.channel_type = res.data.result.channel_type
        this.wx.expire_rate = Number(res.data.result.expire_rate)
        this.wx.expire_time = res.data.result.expire_time
        this.wx.rate = Number(res.data.result.rate)
        this.error_info = res.data.result.error_info
        this.chennel_status = res.data.result.channel_status
      } else {
        this.chennel_status = 0
      }
    })
  }
}
</script>